<template>
  <div class="container">
    <!-- 导航 -->
    <div class="nav">
      <router-link tag="h1" to="/bookshif"
        ><a><i></i></a
        ><span @click="$router.go(-1)">不科学御兽</span></router-link
      >
      <div class="img">
        <a><img src="../assets/img/search_black.gif" alt="" /></a>
        <a><img src="../assets/img/bar.gif" alt="" /></a>
      </div>
    </div>

    <!-- 最新章节目录 -->
    <div class="cata_title">
      <p>不科学御兽最新章节目录</p>
      <router-link tag="p" to="/bookmark">书签</router-link>
    </div>

    <!-- 章节总数 -->
    <div class="sum_chapter">
      <div class="left">共624章</div>
      <div class="right"><span class="iconfont icon-daoxu"></span>倒序</div>
    </div>

    <!-- 最新的章节 -->
    <div class="catalog-title">
      <p>
        <span>第619章：逐渐明白一切</span>
        <img
          src="https://imgservices-1252317822.image.myqcloud.com/coco/s09262022/e21a22c7.iiwf48.png"
          alt=""
        />
      </p>
      <p>
        <span class="time"> 2022-10-23 23:29 </span>
        <span> 作家入驻 · 即更即看 · 还有番外 </span>
      </p>
    </div>

    <!-- 正文卷 -->
    <div class="body_volume">
      <p>正文卷</p>
    </div>

    <!-- 目录内容 -->
    <div class="catalogue_content">
      <div class="cata_lists">
        <router-link
          tag="div"
          :to="'/read?id=' + item.id"
          class="cata_item"
          v-for="item in catalogut_name"
          :key="item.id"
        >
          {{ item.chapter_Name }}
        </router-link>
      </div>
    </div>

    <!-- 底部 -->
    <div class="bottom">
      <div class="img">
        <img src="../assets/img/fixed.png" alt="" />
      </div>
      <div class="text">下载起点读书，新用户免费看</div>
    </div>
  </div>
</template>

<script>
import { getcatalogueData } from "../api/home.js";
export default {
  data() {
    return {
      catalogut_name: null,
    };
  },
  created() {
    getcatalogueData().then((data) => {
      console.log(data);
      this.catalogut_name = data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
// 目录内容
.catalogue_content {
  .cata_lists {
    .cata_item {
      padding: 15px;
      padding-left: 0;
      margin-left: 15px;
      font-size: 14px;
      border-bottom: 1px solid #e3e4e6;
    }
  }
}

// 正文卷
.body_volume {
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #969ba3;
  background-color: #f6f7f9;
  font-size: 12px;
  text-indent: 10px;
}

// 最新的章节
.catalog-title {
  padding: 10px;
  padding-left: 15px;
  p {
    display: flex;
    align-items: center;
    &:nth-child(1) {
      font-weight: 600;
      span {
        margin-right: 5px;
      }
    }
    img {
      width: 24px;
      height: 10px;
    }
    &:nth-child(2) {
      display: flex;
      font-weight: 600;
      margin-top: 4px;
      span {
        &:nth-child(1) {
          font-weight: normal;
          color: #adadad;
          font-size: 12px;
          margin-right: 6px;
        }
        &:nth-child(2) {
          font-weight: normal;
          color: #adadad;
          font-size: 12px;
          background-color: #f5f5f5;
        }
      }
    }
  }
}

// 章节总数
.sum_chapter {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  .left {
    font-weight: 600;
    font-size: 15px;
  }
  .right {
    font-size: 14px;
    span {
      margin-right: 5px;
    }
  }
}

// 最新章节目录
.cata_title {
  padding: 10px 10px 0 10px;
  display: flex;
  text-align: center;
  p {
    font-size: 14px;
    width: 50%;
    padding-bottom: 10px;
    &:nth-child(1) {
      color: #ee2737;
      border-bottom: 1px solid #ee2737;
    }
    &:nth-child(2) {
      border-bottom: 1px solid #e3e4e6;
      color: #969ba3;
    }
  }
}

/* 导航 */
.nav {
  display: flex;
  padding: 9px 12px;
  justify-content: space-between;
  background-color: #fff;
  h1 {
    height: 26px;
    line-height: 26px;
    font-size: 18px;
    color: #ee2737;
    font-weight: bold;
    display: block;
    display: flex;
    span {
      font-size: 14px;
      color: #33373d;
      font-weight: normal;
      margin-left: 16px;
      margin-top: 2px;
    }
    i {
      display: block;
      width: 9px;
      height: 18px;
      background: url("../assets/img/arrow_da.gif") center center no-repeat;
      margin-top: 5px;
    }
  }
  .sex {
    display: flex;
    height: 24px;
    line-height: 24px;
    border: 1px solid #ed424b;
    p {
      &:nth-child(1) {
        padding: 0 12px;
        background-color: #ed424b;
        font-size: 12px;
        color: #fff;
      }
      &:nth-child(2) {
        padding: 0 12px;
        background-color: #fff;
        font-size: 12px;
        color: #ed424b;
      }
    }
  }
  .img {
    display: flex;
    img {
      width: 16px;
      height: 16px;
      padding-top: 6px;
    }
    a {
      &:nth-child(1) {
        img {
          margin-right: 20px;
        }
      }
    }
  }
}

// 底部
.bottom {
  position: fixed;
  bottom: 46px;
  left: 0px;
  right: 0;
  margin: auto;
  display: flex;
  background-color: #ed424b;
  padding: 5px 8px;
  border-radius: 12px;
  width: 251px;
  .img {
    img {
      width: 18px;
      height: 18px;
      margin-top: 3px;
    }
  }
  .text {
    color: #fff;
    text-indent: 0.5rem;
  }
}
</style>
